<template>
  <div class="login-layout">
    <div class="login-bg"></div>
    <login-logo></login-logo>
    <login-tools></login-tools>
    <div class="login-content">
      <router-view #default="{ Component }">
        <Transition name="login-fade" mode="out-in">
          <component :is="Component" />
        </Transition>
      </router-view>
    </div>
    <div class="copyright">Copyright © 2024 {{ appTitle }}</div>
  </div>
</template>

<script setup lang="ts">
import LoginLogo from './components/login-logo/index.vue'
import loginTools from './components/login-tools/index.vue'
const appTitle = import.meta.env.VITE_APP_TITLE
</script>

<style lang="scss" scoped>
.login-layout {
  position: relative;
  width: 100%;
  height: 100%;

  .login-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      154deg,
      #07070915 30%,
      rgb(var(--core-primary-color)) 48%,
      #07070915 64%
    );
    filter: blur(100px);
    opacity: 0.3;
  }

  .login-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    padding: 40px 32px;
    background-color: var(--core-bg-color-02);
    border-radius: 24px;
    box-shadow:
      rgb(0 0 0 / 0%) 0 0 0 0,
      rgb(0 0 0 / 0%) 0 0 0 0,
      0 6px 16px 0 rgba(var(--core-primary-color), 0.05),
      0 3px 6px -4px rgba(var(--core-primary-color), 0.05),
      0 9px 28px 8px rgba(var(--core-primary-color), 0.05);
    transform: translate(-50%, -50%);

    .login-fade-enter-active {
      transition: all 0.3s ease-out;
    }

    .login-fade-enter-from {
      opacity: 0;
      transform: translateX(20px);
    }
  }

  .copyright {
    position: absolute;
    bottom: 12px;
    left: 50%;
    font-size: 12px;
    color: var(--core-text-color-05);
    transform: translateX(-50%);
  }
}

.dark {
  .login-bg {
    opacity: 0.2;
  }
}
</style>
